<template>
	<view class="suggestions-info-page relative">
		<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
			:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
		<comDetailNavigateBack title="投诉建议" />

		<view class="suggest-content relative font-hanserif-bold flex-direction-column">
			<!-- #ifdef MP-WEIXIN -->
			<view class="card" style="color: #999999;font-size: 14rpx;">
				<view class="card-title flex-all-center text-nowrap">
					<image class="content-tip-icon" v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/tips.png`" mode=""></image>
					<view style="color: #FFFFFF;font-size: 24rpx;">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</view>
				</view>
			</view>
			<!-- #endif -->
			
			<view class="card flex-direction-column">
				<view class="card-title">问题描述<text class="card-must">*</text></view>
				<view class="card-body relative">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/suggest-desc-bg.png`" 
						mode=""></image>
						
					<textarea auto-height :maxlength="200" v-model="problemDesc" placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助" placeholder-class="placeholder_class"></textarea>
				</view>
			</view>
			<view class="card flex-direction-column">
				<view class="card-title">相关截图(选填)（{{ imgData.length }}/{{ imgMaxNums }}）</view>
				<view class="card-body">
					<view class="card-imgs">
						<view class="card-imgs-upload relative" v-if="imgData.length < imgMaxNums" @click.stop="uploadUserHead">
							<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/suggest-upload-bg.png`" 
								mode=""></image>
								
							<image
								class="award-select-img absolute"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
								style="width: 44rpx;height: 44rpx;"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/suggest-upload-add.png`" mode="" />
						</view>
						
						<view class="card-imgs-item" v-for="(item, index) in imgData" :key="index">
							<image :src="item" />
							<view class="card-imgs-item-del">
								<image @click="setDelImgFun(index)"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close.png`"
									style="width: 40rpx;height: 40rpx;" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card flex-direction-column">
				<view class="card-title">联系方式<text class="card-must">*</text>（允许客服通过该联系方式联系我）</view>
				<view class="card-body relative">
					<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/common/suggest-input-bg.png`" 
						mode=""></image>
					
					<input :maxlength="30" v-model="problemPhone" placeholder="微信号/手机号码" placeholder-class="placeholder_class" />
				</view>
			</view>

			<!-- <view class="submit-btn relative" @click="setFeedbackCreateFun">
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-submit-btn-bg.png`" class="bg" />
				<view class="relative">
					提交
				</view>
			</view> -->
			
			<view class="submit-btn fixed">
				<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/notify/del-btn-bg.png`" mode=""></image>
				
				<view class="submit-btn_text margin-auto flex-all-center relative" @click="setFeedbackCreateFun">
					<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/basic-info-submit-btn-bg.png`" class="bg" />
					<view class="relative">
						提交
					</view>
				</view>
			</view>
		</view>

		<!-- 小程序隐私保护指引设置 -->
		<!-- #ifdef MP-WEIXIN -->
		<comPrivacyPopup senceOrign="sceneNull" style="z-index: 100000;" title="用户隐私保护提示" popupOfHeight="482rpx">
		</comPrivacyPopup>
		<!-- #endif -->
	</view>
</template>

<script>
	import store from '@/store';
	import {
		setFeedbackCreateApi,
	} from '@/setupproject/INTERFACE';
	import { base64ToPath, pathToBase64 } from 'image-tools'; // 图像转换工具
	
	export default {
		name: 'suggestionsPage',
		data() {
			return {
				problemDesc: '',
				problemPhone: '',
				imgMaxNums: 4,
				imgData: [],
			};
		},
		onShow() {
		},
		computed: {
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
		},
		onLoad() {

		},
		methods: {
			// 上传头像
			uploadUserHead() {
				// 从相册选择6张图
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album'],

					success: (res) => {
						const tempFiles = res.tempFiles;
						let resSize = tempFiles[0].size;
						let limitSize = 0.5 * 1024 * 1024;
						if (resSize > limitSize) {
							return uni.showToast({
								title: '上传图片大小不能超过500KB',
								icon: 'none'
							});
						}

						pathToBase64(res.tempFilePaths[0])
							.then((base64) => {
								this.imgData.push(base64);
							})
							.catch((error) => {});
					}
				});
			},
			
			setDelImgFun(index) {
				this.imgData.splice(index, 1);
			},

			async setFeedbackCreateFun() {
				if (!this.problemDesc) {
					return uni.showToast({
						title: '请填写问题描述！',
						icon: 'error'
					});
				}
				
				if (!this.problemPhone) {
					return uni.showToast({
						title: '请填写联系方式！',
						icon: 'error'
					});
				}
				
				const [em, modal] = await uni.showModal({
					content: '是否确定提交？'
				});
				if (!modal.confirm) return;
				
				let item = {
					content: this.problemDesc, // content	是	string	内容
					phone: this.problemPhone, // phone	是	string	手机号
					path: this.imgData, // path	否	array	图片数组
				}
				
				const {
					data,
					code,
					msg
				} = await setFeedbackCreateApi(item);

				uni.showToast({
					icon: code === 200 ? 'success' : 'none',
					title: msg,
				})
				
				if(code === 200) {
					this.problemDesc = '';
					this.problemPhone = '';
					this.imgData = [];
				}
			},

		}
	};
</script>

<style scoped lang="scss">
	.suggestions-info-page {
		width: 100vw;
		height: 100vh;
		color: #111111;
		
		.suggest-content {
			width: 750rpx;
			padding: 10rpx;
			
			.card {
				width: 100%;
				
				.card-title {
					font-size: 32rpx;
					padding: 15rpx;
					color: #FFFFFF;
					.content-tip-icon {
						width: 20rpx;
						height: 20rpx;
						margin-right: 6rpx;
					}

					.card-must {
						color: red;
					}
				}

				.card-body {
					padding: 15rpx;
					color: #666666;
					textarea {
						font-size: 24rpx;
						min-height: 300rpx;
						color: #FFFFFF;
						width: 100%;
						padding: 10rpx;
						box-sizing: border-box;
						border-radius: 8rpx;
					}

					input {
						font-size: 24rpx;
						width: 100%;
						box-sizing: border-box;
						height: 70rpx;
						padding: 0 15rpx;
						border-radius: 8rpx;
						color: #FFFFFF;
					}
					/deep/ .placeholder_class {
						color: #CEDAFF;
					}

					.card-imgs {
						display: flex;
						flex-wrap: wrap;

						.card-imgs-item {
							width: 150rpx;
							height: 150rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 12rpx;
							margin: 10rpx;
							position: relative;

							image {
								height: 150rpx;
								border-radius: 12rpx;
							}

							.card-imgs-item-del {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								right: -15rpx;
								top: -15rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								z-index: 2;

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}

						}

						.card-imgs-upload {
							width: 150rpx;
							height: 150rpx;
							box-sizing: border-box;
							// border: 1px #777 dashed;
							border-radius: 12rpx;
							margin: 10rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							&:active {
								background: #ccc;
							}

							// image {
							// 	width: 60rpx;
							// 	height: 60rpx;
							// }

							text {
								font-size: 12px;
								color: #777;
							}

						}
					}

				}
			}

			.submit-btn {
				width: 100%;
				height: 172rpx;
				left: 0;
				bottom: 0;
				.submit-btn_text {
					width: 512rpx;
					height: 76rpx;
					color: #4470FF;
					font-size: 28rpx;
					margin-top: 30rpx;
				}
			}
		}

	}
</style>